<html>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<head>
    <meta charset="utf-8">
    <title>用户注销申请</title>
    <script src="../commonCss.js"></script>
    <script src="../commonJs.js"></script>
    <link rel="stylesheet" href="../../css/common.css">
    <style type="text/css">
        .detail-desc {word-break: break-all;}
        table {table-layout: fixed;}
        td {
            white-space:nowrap;/*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
            overflow:hidden;/*隐藏多余的内容*/
            text-overflow:ellipsis;/*显示省略符号来代表被修剪的文本 for IE*/
            -moz-text-overflow: ellipsis; /* for Firefox,mozilla */
        }
    </style>
</head>

<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <div class="ctc_title">用户注销申请</div>
    <div class="down_line"></div>
</section>

<!-- Main content -->
<section class="content" >
    <div class="row">
        <div class="col-xs-12">
            <div class="box-header">
                <form class="form-inline">
                    <label>查询：</label>
                    <div class="form-group">
                        <select class="form-control" id="searchSort">
                            <option value="1">升序</option>
                            <option value="2">降序</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <select class="form-control" id="searchStatus">
                            <option value="">选择状态</option>
                            <option value="0">未受理</option>
                            <option value="1">已受理</option>
                            <option value="2">已取消</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input style="width: 260px;" class="form-control" type="text" id="searchKey"  placeholder="输入账号/手机号/昵称/真实姓名搜索"/>
                    </div>
                    <div class="form-group">
                        <button type="button"  onclick="getData()"  class="btn btn-block btn-primary">搜索</button>
                    </div>

                </form>
            </div>

            <div class="box-body" style="height:100%;">
                <table id="dataList" class="table table-bordered table-hover" >
                    <thead>
                    <tr>
                        <th>用户ID</th>
                        <th>用户账号</th>
                        <th>用户昵称</th>
                        <th>手机号</th>
                        <th>真实姓名</th>
                        <th>申请原因</th>
                        <th>详细描述</th>
                        <th>申请状态</th>
                        <th>用户状态</th>
                        <th>申请时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody >
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<!-- page script -->
<script>
    $(document).ready(function() {
        layui.use('layer', function(){
            var layer = layui.layer;
        });
        //加载数据
        getData();
    });

    // 加载数据
    function getData(){
        var searchSort = $("#searchSort").val();
        if (searchSort == '2') {
        	searchSort = 'desc';
        } else {
        	searchSort = '';
        }
        var searchStatus = $("#searchStatus").val();
        var table = $('#dataList').DataTable({
            "destroy": true,   //可以重新初始化，用于搜索
            "lengthChange": false,
            "ordering": false,   //排序
            "info": true,		   //
            "autoWidth": false,   //宽度自动
            "paging": true,      //分页
            "searching": false,  //全局搜索关闭
            "processing": true,  //开启显示‘正在加载.../processing’
            "serverSide":true,    //true代表后台处理分页，false代表前台处理分页
            "ajax" :  {
                url:"/user/getUserCancelationApplicationList",
                type:"post",
                data:{
                    "sort" : searchSort,
                    "status" : searchStatus,
                    "key" : $("#searchKey").val()
                },
                dataSrc: function (myJson) {
                    return myJson.data.data;
                }
            },
            //参数显示
            "columns": [
                {"data": "uid", 'sClass': "text-center",'width': '2%'},
                {"data": "account", 'sClass': "text-center",'width': '4%'},
                {"data": "username", 'sClass': "text-center",'width': '4%'},
                {"data": "mobile", 'sClass': "text-center",'width': '4%'},
                {"data": "partyName", 'sClass': "text-center",'width': '2%'},
                {"data": "reason", 'sClass': "text-center",'width': '3%'},
                {"data": "detailDescription", 'sClass': "text-left detail-desc",'width': '3%'},
                {"data": "status", 'sClass': "text-center",'width': '3%',
                    "render":function( data, type, full, meta) {
                        var str = "";
                        if(data == 0){
                            str += "<span class='label label-primary' style='padding-left:10px;padding-right:10px;padding-top: inherit;' >未受理</span> ";
                        }else if(data == 1){
                            str += "<span class='label label-success' style='padding-left:10px;padding-right:10px;padding-top: inherit;' >已受理</span> ";
                        }else{
                            str += "<span class='label label-default' style='padding-left:10px;padding-right:10px;padding-top: inherit;'>已取消</span>";
                        }
                        return str;
                    }
                },
                {"data": "userStatus", 'sClass': "text-center",'width': '3%',
                    "render":function( data, type, full, meta) {
                        var str = "";
                        if(data == 0){
                            str += "<span class='label label-success' style='padding-left:10px;padding-right:10px;padding-top: inherit;' >正常</span> ";
                        }else if(data == 1){
                            str += "<span class='label label-danger' style='padding-left:10px;padding-right:10px;padding-top: inherit;' >已冻结</span> ";
                        }else{
                            str += "<span class='label label-default' style='padding-left:10px;padding-right:10px;padding-top: inherit;'>已注销</span>";
                        }
                        return str;
                    }
                },
                {"data": "createTime", 'sClass': "text-center",'width': '3%',
                    "render":function( data, type, full, meta) {
                        return toDate(data).format('yyyy-MM-dd HH:mm:ss');
                    }
                },
                {"data": "id" , 'sClass': "text-center" ,'width':'4%',
                    "render": function (data, type, full, meta ) {
                        var str ="";
                        if(full.status == 0){
                            str += "<a href = '#' title='受理' onclick=checkPass(" + data +");><i class='\glyphicon glyphicon-ok'></i></a>&nbsp;&nbsp;&nbsp;";
                        }
                        if(full.status == 0){
                            str += "<a href = '#' title='驳回' onclick=checkBack(" + data +");><i class='\glyphicon glyphicon-repeat'></i></a>&nbsp;&nbsp;&nbsp;";
                        }
                        return str;
                    }
                }
            ],

            //是否开启主题
            "bJQueryUI": true,
            "oLanguage": {    // 语言设置
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "检索:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            }
        });
    }

    function checkPass(id) {
        if(confirm("确定受理该注销申请，注销该账号？")){
            $.ajax({
                url:"/user/acceptCancelationApplication",
                type:"POST",
                async : true,//默认就是true
                dataType:"json",
                data:{id : id},
                success:function(data) {
                    layer.msg(data.message);
                    getData();
                }
            });
        }
    }

    function checkBack(id) {
        if(confirm("确定驳回该注销申请？")){
            $.ajax({
                url:"/user/rejectCancelationApplication",
                type:"POST",
                async : true,//默认就是true
                dataType:"json",
                data:{id : id},
                success:function(data) {
                    layer.msg(data.message);
                    getData();
                }
            });
        }
    }

    let tip_index = 0;
    //表格对象
    const $dataList = $("#dataList");
    //鼠标悬停显示内容
    $dataList.on("mouseover", "td", function() {
        if(this.offsetWidth < this.scrollWidth) { //判断文本是否超出
            const content = $(this).text(); //获取文案
            if(content) {
                tip_index = layer.tips(content, this, { time: 0 , tips: [3, '#ffb951'], area: ['300px', 'auto']});
            }
        }
    });
    //鼠标移开隐藏内容
    $dataList.on("mouseleave",  "td", function() {
        layer.close(tip_index);
    })
</script>
</body>
</html>
